<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>补发退发录入页面</title>

    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
    <!-- 必须先引入vue，  后使用element-ui -->
    <script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
    <!-- 引入element 的组件库-->
    <script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

    <script type="text/javascript" src="/admin/plugin/element-ui/httpVueLoader.js"></script>

    <!--引入layui组件-->
    <link rel="stylesheet" href="/admin/plugin/layui/dist/css/layui.css"  media="all">
    <script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>

    <script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1"></script>

    <link rel="stylesheet" href="/admin/js-css/css/listvue.css"  media="all" >

    <style>
        body{
            padding: 5px 20px;
        }
    </style>

</head>
<body>
<div id="app"  >
    <div>
        <div id="topdiv" ref="appdiv" >
            <div class="demoTable" style="padding: 5px;"  >
                <el-form :inline="true" size="mini"   ref="listSearch"   >
                    <el-form-item    v-for="(item,index) in listSearch" :style="'display:'+item.isHide" >
                        <!--模糊搜索-->
                        <template  v-if="item.gs == '' || item.gs=='0' || item.gs=='4' || item.gs == '6'"  >

                            <template v-if="item.type == '0'">
                                <el-input style="width:180px" v-model="searchInputDtos[item.key].value" :placeholder="item.lable"  clearable ></el-input>
                            </template>

                            <!--下拉框多选-->
                            <template v-if="item.type == '6' || item.type=='8'" >
                                <el-select  multiple :placeholder="item.lable"
                                            filterable style="width:180px"
                                            v-model="searchInputDtos[item.key].values"  >
                                    <el-option value="" ></el-option>
                                    <el-option :value="vm.value"  :label="vm.showValue" v-for="vm in item.searchTypeForSelectDtos">{{vm.showValue}}</el-option>
                                </el-select>
                            </template>

                            <template v-if="item.type == '11'" >
                                <el-cascader :placeholder="item.lable" :ref="item.key" size="mini" @change="handleChange(item.key)" clearable
                                             v-model="searchInputDtos[item.key].value"  :props="cascaderProps[item.key]"
                                ></el-cascader>
                            </template>

                            <!--日期框-->
                            <template v-if="item.type == '1'">
                                <el-date-picker value-format="yyyy-MM-dd" :placeholder="item.lable"
                                                v-model="searchInputDtos[item.key].value"  style="width:180px"
                                                type="date" >
                                </el-date-picker>
                            </template>

                            <!--日期框时分秒-->
                            <template v-if="item.type == '5'">
                                <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" :placeholder="item.lable"
                                                v-model="searchInputDtos[item.key].value"  style="width:180px"
                                                type="datetime" >
                                </el-date-picker>
                            </template>

                        </template>

                        <!--大于小于输入框-->
                        <template  v-if="item.gs=='1'"  >
                            <template v-if="item.type == '0'">
                                <el-input style="width:180px"  v-model="searchInputDtos[item.key].searchTypeForDateDto.start" :placeholder="'开始'+item.lable" ></el-input>
                                <el-input style="width:180px"  v-model="searchInputDtos[item.key].searchTypeForDateDto.end" :placeholder="'结束'+item.lable" ></el-input>
                            </template>

                            <!--下拉框多选-->
                            <template v-if="item.type == '6' || item.type=='8'" >
                                <el-select filterable style="width:180px" :placeholder="'开始'+item.lable"
                                           v-model="searchInputDtos[item.key].searchTypeForDateDto.start" >
                                    <el-option value="" ></el-option>
                                    <el-option :value="vm.value" :label="vm.showValue" v-for="vm in item.searchTypeForSelectDtos">{{vm.showValue}}</el-option>
                                </el-select>

                                <el-select  filterable style="width:180px" :placeholder="'结束'+item.lable"
                                            v-model="searchInputDtos[item.key].searchTypeForDateDto.end" >
                                    <el-option value="" ></el-option>
                                    <el-option :value="vm.value" :label="vm.showValue" v-for="vm in item.searchTypeForSelectDtos">{{vm.showValue}}</el-option>
                                </el-select>
                            </template>

                            <template v-if="item.type == '11'" >
                                <el-cascader  :ref="item.key" size="mini" @change="handleChange(item.key)" clearable :placeholder="'开始'+item.lable"
                                              v-model="searchInputDtos[item.key].searchTypeForDateDto.start" :props="cascaderProps[item.key]"
                                ></el-cascader>
                                <el-cascader  :ref="item.key" size="mini" @change="handleChange(item.key)" clearable :placeholder="'结束'+item.lable"
                                              v-model="searchInputDtos[item.key].searchTypeForDateDto.end" :props="cascaderProps[item.key]"
                                ></el-cascader>
                            </template>

                            <!--日期框-->
                            <template v-if="item.type == '1'">
                                <el-date-picker value-format="yyyy-MM-dd"  :placeholder="'开始'+item.lable"
                                                v-model="searchInputDtos[item.key].searchTypeForDateDto.start" style="width:180px"
                                                type="date" >
                                </el-date-picker>
                                <el-date-picker value-format="yyyy-MM-dd" :placeholder="'结束'+item.lable"
                                                v-model="searchInputDtos[item.key].searchTypeForDateDto.end" style="width:180px"
                                                type="date" >
                                </el-date-picker>
                            </template>

                            <!--日期框时分秒-->
                            <template v-if="item.type == '5'">
                                <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" :placeholder="'开始'+item.lable"
                                                v-model="searchInputDtos[item.key].searchTypeForDateDto.start" style="width:180px"
                                                type="datetime" >
                                </el-date-picker>
                                <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" :placeholder="'结束'+item.lable"
                                                v-model="searchInputDtos[item.key].searchTypeForDateDto.end" style="width:180px"
                                                type="datetime" >
                                </el-date-picker>
                            </template>

                        </template>

                        <!--大于条件-->
                        <template  v-if="item.gs=='2'"  >
                            <template v-if="item.type == '0'">
                                <el-input style="width:180px"  v-model="searchInputDtos[item.key].searchTypeForDateDto.start" :placeholder="item.lable"  ></el-input>
                            </template>

                            <!--下拉框多选-->
                            <template v-if="item.type == '6' || item.type=='8'" >
                                <el-select filterable style="width:180px"  :placeholder="item.lable"
                                           v-model="searchInputDtos[item.key].searchTypeForDateDto.start" >
                                    <el-option value="" ></el-option>
                                    <el-option :value="vm.value" :label="vm.showValue" v-for="vm in item.searchTypeForSelectDtos">{{vm.showValue}}</el-option>
                                </el-select>
                            </template>

                            <template v-if="item.type == '11'" >
                                <el-cascader  :ref="item.key" size="mini" @change="handleChange(item.key)" clearable  :placeholder="item.lable"
                                              v-model="searchInputDtos[item.key].searchTypeForDateDto.start" :props="cascaderProps[item.key]"
                                ></el-cascader>
                            </template>

                            <!--日期框-->
                            <template v-if="item.type == '1'">
                                <el-date-picker value-format="yyyy-MM-dd"  :placeholder="item.lable"
                                                v-model="searchInputDtos[item.key].searchTypeForDateDto.start" style="width:180px"
                                                type="date" >
                                </el-date-picker>
                            </template>

                            <!--日期框时分秒-->
                            <template v-if="item.type == '5'">
                                <el-date-picker value-format="yyyy-MM-dd HH:mm:ss"  :placeholder="item.lable"
                                                v-model="searchInputDtos[item.key].searchTypeForDateDto.start" style="width:180px"
                                                type="datetime" >
                                </el-date-picker>
                            </template>

                        </template>

                        <!--小于条件-->
                        <template  v-if="item.gs=='3'"  >
                            <template v-if="item.type == '0'">
                                <el-input style="width:180px"  v-model="searchInputDtos[item.key].searchTypeForDateDto.end"  :placeholder="item.lable"  ></el-input>
                            </template>

                            <!--下拉框多选-->
                            <template v-if="item.type == '6' || item.type=='8'" >

                                <el-select  filterable style="width:180px"
                                            v-model="searchInputDtos[item.key].searchTypeForDateDto.end"  :placeholder="item.lable" >
                                    <el-option value="" ></el-option>
                                    <el-option :value="vm.value"  :label="vm.showValue" v-for="vm in item.searchTypeForSelectDtos">{{vm.showValue}}</el-option>
                                </el-select>
                            </template>

                            <template v-if="item.type == '11'" >
                                <el-cascader  :ref="item.key" size="mini" @change="handleChange(item.key)" clearable  :placeholder="item.lable"
                                              v-model="searchInputDtos[item.key].searchTypeForDateDto.end" :props="cascaderProps[item.key]"
                                ></el-cascader>
                            </template>

                            <!--日期框-->
                            <template v-if="item.type == '1'">
                                <el-date-picker value-format="yyyy-MM-dd"  :placeholder="item.lable"
                                                v-model="searchInputDtos[item.key].searchTypeForDateDto.end" style="width:180px"
                                                type="date" >
                                </el-date-picker>
                            </template>

                            <!--日期框时分秒-->
                            <template v-if="item.type == '5'">
                                <el-date-picker value-format="yyyy-MM-dd HH:mm:ss"  :placeholder="item.lable"
                                                v-model="searchInputDtos[item.key].searchTypeForDateDto.end" style="width:180px"
                                                type="datetime" >
                                </el-date-picker>
                            </template>

                        </template>

                    </el-form-item>

                    <el-form-item v-if="JSON.stringify(listSearch) != '{}' " >
                        <span class="layui-btn"  @click="toolsSearch()">搜索</span>

                    </el-form-item>
                </el-form>
            </div>
            <!-- 分割线-->
            <el-divider   style="margin: 3px 0;" ></el-divider>
            <el-row style="margin-bottom: 4px;" >


            </el-row>
        </div>


        <el-table
                :data="tableData"
                border
                size="mini"
                :height="tableHeight"
                @selection-change="handleSelectionChange"
                style="width: 100%">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>

            <el-table-column
                    prop="gmsfhm"
                    label="公民身份证号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="xm"
                    label="姓名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="ksny"
                    width="120"
                    label="补收开始年月">
                <template  slot-scope="scope">
                    <el-input  size="mini" v-model="scope.row['ksny']" ></el-input>
                </template>
            </el-table-column>
            <el-table-column
                    prop="zzny"
                    width="120"
                    label="补收终止年月">
                <template  slot-scope="scope">
                    <el-input  size="mini" v-model="scope.row['zzny']" ></el-input>
                </template>
            </el-table-column>

            <el-table-column
                    prop="leibie"
                    label="保险待遇类别">
                <template  slot-scope="scope">
                    <el-checkbox v-for="(item,index) in scope.row.listdy" v-model="scope.row['lb'+item.gsbxdylb_value]" >{{item.gsbxdylb}}</el-checkbox>
                </template>
            </el-table-column>
            <el-table-column
                    prop="bftfyy"
                    width="180"
                    label="补收原因">
                <template  slot-scope="scope">
                    <el-input  size="mini" v-model="scope.row['bftfyy']" ></el-input>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
                background
                @current-change="handleCurrentChange"
                @size-change="sizeChange"
                layout="prev, pager, next,total,sizes"
                :total="total"
                :page-size="pageSize"
                :page-sizes="pageSizes"
        >
        </el-pagination>
    </div>
</div>
</body>
<script>
    Vue.use(httpVueLoader);

    var _this = {};

    var vm = new Vue({
        el:"#app",
        components: {
            "list" : httpVueLoader("/admin/html/dataManagement/list.vue")
        },
        data:{
            type:"1",//人员类型
            pageNumber:1,
            total:0,
            pageCount:0,
            pageSize:15,
            pageSizes:[10,15,20,50,100],
            listSearch:{},
            searchInputDtos:{},
            parmsData : {},
            selectData : [],
            multipleSelection : [],
            tableData: [],
            tableHeight:0
        },
        created(){
            _this = this;
            this.parmsData = getParams();
            this.type = this.parmsData.type;
            this.getSearchInput();
            this.getListdata();
            _this.tableHeight = parseInt(document.documentElement.scrollHeight)-$("#topdiv").height()-100;
        },
        methods:{
            handleSelectionChange(val) {
                _this.multipleSelection = [];
                _this.selectData = [];
                for (let a = 0; a < val.length; a++) {
                    try {
                        _this.selectData.push(val[a]);
                        let vmvalue = "";
                        let keyids = ["id"];
                        for (let i = 0; i < keyids.length; i++) {
                            if (i == keyids.length - 1) {
                                vmvalue = vmvalue + val[a][keyids[i]];
                            } else {
                                vmvalue = vmvalue + val[a][keyids[i]] + "/";
                            }
                        }
                        _this.multipleSelection.push(vmvalue);
                    } catch (e) {
                    }
                }
            },
            //每页记录数改变
            sizeChange(val){
                _this.pageSize = val;
                _this.getListdata();
            },
            //开始翻页
            handleCurrentChange(val){
                _this.pageNumber = val;
                _this.getListdata();
            },
            async savedata(data){
                let i = top.load();
                const res = await postWebCustom(getTableId("2389"),data);
                top.layer.close(i);
                top.alert(res.msg);
                if(res.code == 1){
                    vm.$refs.listCommon.getListdata();
                }
            },
            async getListdata(){
                let i = load();
                const res = await postWebCustom(getTableId("2400"),{searchInputDtos:this.searchInputDtos,pageSize:""+this.pageSize,pageNo:""+this.pageNumber,type:+this.type});
                layer.close(i);
                this.tableData = res.data.rows;
                _this.total = parseInt(res.data.total);
                _this.pageSize = parseInt(res.data.pageSize);
                _this.pageCount = parseInt(res.data.pageCount);
            },
            async toolsSearch(){
                this.pageNumber = 1;
                this.getListdata();
            },
            async getSearchInput(){
                const res = await postBody("/admin/api/DataManagementController/getCustomFields", {tableId: getTableId("2345"),mapdata:{},other:{}});
                this.listSearch = res.data.listSearch;
                this.searchInputDtos = res.data.listSearch;
            },
            async addjibenxinxiInput(data){
                let btn = {
                    btn: ['发起审批','保存', '取消']
                    , yes: function (index, layero) {
                        //按钮【按钮一】的回调
                        let win = getTopIframe(layero);
                        let data = win.getData();
                        if(!win.verification()){
                            return false;
                        }
                        vm.savedata({jsondata:JSON.stringify(data),issp:"0"});
                        return false;
                    }
                    , btn2: function (index, layero) {
                        //按钮【按钮一】的回调
                        let win = getTopIframe(layero);
                        let data = win.getData();
                        if(!win.verification()){
                            return false;
                        }
                        vm.savedata({jsondata:JSON.stringify(data),issp:"-1"});
                        return false;
                    }, btn3: function (index, layero) {
                        //按钮【按钮二】的回调
                        //return false 开启该代码可禁止点击该按钮关闭
                    }
                };

                const res = await postWebCustom(getTableId("2388"),{id:data[0].id});
                if(res.code == 0){
                    top.alert(res.msg);
                    return;
                }
                top.data.other = {type:"add"};
                top.f_layer_open_get("/admin/html/inputCustom/index.html?tableId="+getTableId("2376"), "85%", "85%", function () {

                }, btn, "工亡亲属待遇核定录入",res.data);
            },
            //新增再就业个人基本信息
            addJibenxinxi(){
                let btn = {
                    btn: ['确定', '取消']
                    , yes: function (index, layero) {
                        //按钮【按钮一】的回调
                        let win = getTopIframe(layero);
                        let data = win.vm.selectData;
                        console.log(data);
                        if(data.length > 1){
                            top.alert("只能选择一条记录！");
                            return ;
                        }
                        if(data.length == 0){
                            top.alert("请选择一条记录！");
                            return ;
                        }
                        vm.addjibenxinxiInput(data);
                        top.layer.closeAll();
                    }
                    , btn2: function (index, layero) {
                        //按钮【按钮二】的回调
                        //return false 开启该代码可禁止点击该按钮关闭
                    }
                };

                top.f_layer_open_get("/admin/html/dataManagement/list.html?tableId="+getTableId("2396"), "90%", "85%", function () {

                }, btn, "从工亡人员信息中选择人员信息");
            },

        }
    });
</script>
</html>